<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>信息管理系统 - 注册</title>
<meta name="keywords" content="perfect-ssm">
<meta name="description" content="perfect-ssm">

<!--icon-->
<link rel="shortcut icon" type="image/x-icon"
	href="css/common/favicon.ico" media="screen" />
<!-- Bootstrap 3.3.6 -->
<link rel="stylesheet"
	href="css/adminlte/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet"
	href="css/common/libs/font-awesome/css/font-awesome.min.css">
<!-- Ionicons -->
<link rel="stylesheet"
	href="css/common/libs/ionicons/css/ionicons.min.css">
<!-- Theme style -->
<link rel="stylesheet" href="css/adminlte/dist/css/AdminLTE.min.css">
<!-- iCheck -->
<link rel="stylesheet" href="css/adminlte/plugins/iCheck/square/red.css">
<link rel="stylesheet"
	href="css/adminlte/plugins/bootstrap-validator/dist/css/bootstrap-validator.css" />
<!-- 动画进入 -->
<link rel="stylesheet" href="css/animate.min.css" />
</head>
<body class="hold-transition login-page">
	<div class="login-box animated fadeInDown">
		<div class="login-logo">
			<a href="#"><b>IM</b>System</a>
		</div>
		<!-- /.login-logo -->
		<div class="login-box-body">
			<p class="login-box-msg">
				<strong>新用户注册</strong>
			</p>

			<form action="##" method="post" onsubmit="return false" role="form"
				id="register-form">
				<div class="form-group has-feedback">
					<input type="text" class="form-control" name="username"
						id="username" placeholder="请输入用户名" required> <span
						class="glyphicon glyphicon-user form-control-feedback"></span>
				</div>
				<div class="form-group has-feedback">
					<input type="text" class="form-control" name="phone"
						id="phone" placeholder="请输入手机号"> <span
						class="glyphicon glyphicon-phone form-control-feedback"></span>
				</div>
				<div class="form-group has-feedback">
					<input type="text" class="form-control" name="email" id="email"
						placeholder="请输入邮箱"> <span
						class="glyphicon glyphicon-envelope form-control-feedback"></span>
				</div>
				<div class="form-group has-feedback">
					<input type="password" class="form-control" name="password"
						id="password" placeholder="请输入密码"> <span
						class="glyphicon glyphicon-lock form-control-feedback"></span>
				</div>
				<div class="form-group has-feedback">
					<input type="password" class="form-control" name="repassword"
						id="repassword" placeholder="再次确认密码"> <span
						class="glyphicon glyphicon-log-in form-control-feedback"></span>
				</div>
				<div class="row">
					<div class="col-xs-12">
						<div class="checkbox icheck">
							<label> <input type="checkbox" id="agreement"
								class="icheck" required> 同意遵循<a href="#">IMSysyem协议</a>
							</label>
						</div>
					</div>
					<!-- /.col -->
				</div>
				<div class="row">
					<div class="col-xs-12">
						<button type="button" class="btn btn-danger btn-block btn-flat"
							onclick="javascript:register();">注 册</button>
					</div>
				</div>
			</form>
		</div>
	</div>
	<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
	<script
		src="http://apps.bdimg.com/libs/bootstrap/3.3.4/js/bootstrap.min.js"></script>
	<script src="js/jquery.serializejson.min.js"></script>
	<!-- bootstrap-validator-->
	<script
		src="css/adminlte/plugins/bootstrap-validator/dist/js/bootstrap-validator.js"></script>
	<!-- iCheck -->
	<script src="css/adminlte/plugins/iCheck/icheck.min.js"></script>
	<script src="js/common.js"></script>
	<script src="js/base-modal.js"></script>
	<script src="js/login.js"></script>
	<script type="text/javascript">
	/* 初始化check 改变为ickeckbox*/
	$(function() {
	    $('input.icheck').iCheck({
		checkboxClass : 'icheckbox_square-red',
		radioClass : 'iradio_square-red',
		increaseArea : '20%' // optional
	    });

	    $("#register-form").bootstrapValidator({
		submitHandler : function(valiadtor, loginForm, submitButton) {
		    if (!$("#agreement").is(":checked")) {
			modals.info("请先勾选同意遵循IMSysyem协议");
			return;
		    }
		    valiadtor.defaultSubmit();
		},
		fields : {
		    username : {
			validators : {
			    notEmpty : {
				message : '用户名不能为空'
			    },
			    stringLength : {
				/*长度提示*/
				min : 2,
				max : 15,
				message : '用户名长度必须在2到15之间'
			    },
			    threshold : 2,//只有2个字符以上才发送ajax请求
			    remote : {
				url : "/oauth/checkUnique",
				data : function(validator) {
				    return {
					inputvalue : $("#username").val()
				    };
				},
				message : '该用户名已被使用，请使用其他用户名',
				delay : 2000
			    }
			}
		    },
		    phone : {
			validators : {
			    notEmpty : {
				message : '手机号不能为空'
			    },
			    stringLength : {
				/*长度提示*/
				min : 11,
				max : 11,
				message : '手机号必须11位数'
			    },
			    threshold : 11,//只有11个字符以上才发送ajax请求
			    remote : {
				url : "/oauth/checkUnique",
				data : function(validator) {
				    return {
					inputvalue : $("#phone").val(),
					username : null
				    };
				},
				message : '该手机号已被使用，请使用其他手机号',
				delay : 2000
			    }
			}
		    },
		    email : {
			validators : {
			    notEmpty : {
				message : '登录邮箱名不能为空'
			    },
			    stringLength : {
				/*长度提示*/
				min : 4,
				max : 30,
				message : '邮箱长度必须在4到30之间'
			    },
			    threshold : 4,//只有4个字符以上才发送ajax请求
			    remote : {
				url : "/oauth/checkUnique",
				data : function(validator) {
				    return {
					inputvalue : $("#email").val(),
					username : null
				    };
				},
				message : '该邮箱已被使用，请使用其他邮箱',
				delay : 2000
			    }
			}
		    },
		    password : {
			validators : {
			    notEmpty : {
				message : '密码不能为空'
			    },
			    stringLength : {
				/*长度提示*/
				min : 6,
				max : 30,
				message : '密码长度必须在6到30之间'
			    },
			    different : {//不能和用户名相同
				field : 'username',//需要进行比较的input name值
				message : '不能和用户名相同'
			    },
			    regexp : {
				regexp : /^[a-zA-Z0-9_\.]+$/,
				message : '密码由数字字母下划线和.组成'
			    }
			}
		    },
		    repassword : {
			message : '密码无效',
			validators : {
			    notEmpty : {
				message : '密码不能为空'
			    },
			    stringLength : {
				min : 6,
				max : 30,
				message : '用户名长度必须在6到30之间'
			    },
			    identical : {//相同
				field : 'password',
				message : '两次密码不一致'
			    },
			    different : {//不能和用户名相同
				field : 'username',
				message : '不能和用户名相同'
			    },
			    regexp : {//匹配规则
				regexp : /^[a-zA-Z0-9_\.]+$/,
				message : '密码由数字字母下划线和.组成'
			    }
			}
		    }

		}
	    });
	});
    </script>
</body>

</html>
